<template>
    <div class="payment-page">
        <div class="card">
            <div class="card-header">
                <span>网上缴费统计</span><br>
            </div>
            <div class="card-body">
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <el-table :data="tableData" >
                        <el-table-column prop="stu_ID" label="学生Id"></el-table-column>
                        <el-table-column prop="result" label="学费缴费情况"></el-table-column>
                        <el-table-column prop="result1" label="代收费缴费情况"></el-table-column>
                        <el-table-column prop="result2" label="住宿费缴费情况"></el-table-column>
                    </el-table>

                    <el-pagination
                            :page-size="pageSize"
                            :current-page="pageNum"
                            :total="totalCount"
                            layout="total, prev, pager, next, jumper"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange">
                    </el-pagination>

                </div>
            </div>
        </div>
    </div>
</template>



<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            tableData: [],
        }
    },

    mounted() {
        this.GetOfflineFee()
    },
    methods: {
        GetOfflineFee() {
            const GetOfflineFeeRequest = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
            }
            request.post("/regis/form/offline", GetOfflineFeeRequest)
                .then(res => {
                    console.log(res.data);
                    this.tableData = res.data.data.list;
                    this.totalCount = res.data.data.totalCount;
                })
                .catch(error => {
                    console.error("Error fetching data:", error);
                    Message.error("获取数据失败！");
                });
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.pageNum = 1;
            this.GetAdvent();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.GetAdvent();
        },
    }
};
</script>
